<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="merchant-entry.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">商家登录</h1>
                <div></div>
            </div>
        </div>

        <!-- Login Form -->
        <div class="h-[calc(852px-100px)] overflow-y-auto pb-8">
            <div class="p-6">
                <!-- Welcome -->
                <div class="text-center mb-8">
                    <div class="w-20 h-20 mx-auto bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-store text-3xl text-white"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">商家服务平台</h2>
                    <p class="text-sm text-gray-600">登录后即可申请入驻或管理店铺</p>
                </div>

                <!-- Main One-Click Login -->
                <div class="mb-6">
                    <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-5 border border-indigo-100">
                        <div class="text-center mb-4">
                            <p class="text-xs text-gray-500 mb-1">本机号码</p>
                            <p class="text-2xl font-bold text-gray-800" id="devicePhoneNumber">150****1481</p>
                            <p class="text-xs text-indigo-600 mt-1">使用平台账号快速登录</p>
                        </div>
                        <button onclick="oneClickLogin()" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 rounded-lg font-semibold text-lg shadow-lg hover:shadow-xl transition-all hover:scale-[1.02]">
                            <i class="fas fa-rocket mr-2"></i>
                            一键登录
                        </button>

                        <!-- Agreement -->
                        <div class="flex items-start mt-4 px-2">
                            <input type="checkbox" id="agreeCheckbox" class="w-4 h-4 mt-0.5 mr-2 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" checked>
                            <label for="agreeCheckbox" class="text-xs text-gray-600 leading-relaxed">
                                登录即表示您同意
                                <span class="text-indigo-600 font-medium cursor-pointer hover:text-indigo-800" onclick="showMerchantAgreement()">《商家服务协议》</span>
                                和
                                <span class="text-indigo-600 font-medium cursor-pointer hover:text-indigo-800" onclick="showPrivacyPolicy()">《隐私政策》</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Divider -->
                <div class="flex items-center mb-5">
                    <div class="flex-1 border-t border-gray-200"></div>
                    <span class="px-3 text-xs text-gray-400 font-medium">其他登录方式</span>
                    <div class="flex-1 border-t border-gray-200"></div>
                </div>

                <!-- Other Login Methods -->
                <div class="space-y-3">
                    <!-- SMS Login Button -->
                    <a href="sms-login.html?type=merchant" class="w-full bg-white border border-gray-200 text-gray-700 py-3.5 rounded-xl font-medium hover:bg-gray-50 hover:border-indigo-300 hover:shadow-md transition-all flex items-center justify-center group block">
                        <i class="fas fa-comment-dots text-indigo-500 mr-2 group-hover:text-indigo-600"></i>
                        <span class="text-sm">手机验证码登录</span>
                    </a>

                    <!-- Third Party Login - Horizontal -->
                    <div class="flex space-x-3">
                        <button onclick="wechatLogin()" class="flex-1 bg-white border border-gray-200 py-3.5 rounded-xl font-medium hover:bg-green-50 hover:border-green-300 hover:shadow-md transition-all flex items-center justify-center group">
                            <i class="fab fa-weixin text-xl text-green-600 mr-2"></i>
                            <span class="text-sm text-gray-700 group-hover:text-green-700">微信登录</span>
                        </button>
                        <button onclick="alipayLogin()" class="flex-1 bg-white border border-gray-200 py-3.5 rounded-xl font-medium hover:bg-blue-50 hover:border-blue-300 hover:shadow-md transition-all flex items-center justify-center group">
                            <i class="fab fa-alipay text-xl text-blue-600 mr-2"></i>
                            <span class="text-sm text-gray-700 group-hover:text-blue-700">支付宝登录</span>
                        </button>
                    </div>
                </div>


                <!-- Help -->
                <div class="text-center pt-6 border-t border-gray-200 mt-6">
                    <p class="text-xs text-gray-500 mb-3">登录遇到问题？</p>
                    <div class="flex justify-center space-x-4">
                        <button onclick="contactSupport()" class="text-xs text-indigo-600 hover:text-indigo-800">
                            <i class="fas fa-headset mr-1"></i>联系客服
                        </button>
                        <button onclick="viewHelp()" class="text-xs text-indigo-600 hover:text-indigo-800">
                            <i class="fas fa-question-circle mr-1"></i>帮助中心
                        </button>
                    </div>
                </div>

                <!-- Notice Section -->
                <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-xl">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-yellow-600 mt-0.5 mr-2"></i>
                        <div class="flex-1">
                            <p class="text-xs font-medium text-yellow-800 mb-1">温馨提示</p>
                            <ul class="text-xs text-yellow-700 space-y-1">
                                <li>• 使用您的平台账号即可登录</li>
                                <li>• 登录成功后可直接申请商家入驻</li>
                                <li>• 一个账号可同时享受购物和开店服务</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        // Simulate getting device phone number
        function getDevicePhoneNumber() {
            const prefixes = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '171', '172', '173', '175', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
            const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
            const suffix = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
            return `${prefix}****${suffix}`;
        }

        // One-click login
        function oneClickLogin() {
            if (!document.getElementById('agreeCheckbox').checked) {
                showToast('请先同意商家服务协议和隐私政策');
                document.getElementById('agreeCheckbox').parentElement.classList.add('animate-pulse');
                setTimeout(() => {
                    document.getElementById('agreeCheckbox').parentElement.classList.remove('animate-pulse');
                }, 2000);
                return;
            }

            const btn = event.currentTarget;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>正在登录...';
            btn.disabled = true;

            // Simulate login process
            setTimeout(() => {
                // Set login status
                localStorage.setItem('userToken', 'merchant-token-' + Date.now());
                localStorage.setItem('userType', 'merchant');
                localStorage.setItem('phoneNumber', document.getElementById('devicePhoneNumber').textContent);

                showToast('登录成功！正在跳转...');
                setTimeout(() => {
                    // Redirect to homepage
                    window.location.href = 'home-b2c.html';
                }, 1000);
            }, 1500);
        }

        // WeChat login
        function wechatLogin() {
            if (!document.getElementById('agreeCheckbox').checked) {
                showToast('请先同意商家服务协议和隐私政策');
                document.getElementById('agreeCheckbox').parentElement.classList.add('animate-pulse');
                setTimeout(() => {
                    document.getElementById('agreeCheckbox').parentElement.classList.remove('animate-pulse');
                }, 2000);
                return;
            }
            showToast('正在跳转微信授权...');
            setTimeout(() => {
                localStorage.setItem('userToken', 'merchant-wechat-' + Date.now());
                localStorage.setItem('userType', 'merchant');
                localStorage.setItem('loginMethod', 'wechat');
                showToast('微信授权成功！');
                setTimeout(() => {
                    window.location.href = 'home-b2c.html';
                }, 1000);
            }, 2000);
        }

        // Alipay login
        function alipayLogin() {
            if (!document.getElementById('agreeCheckbox').checked) {
                showToast('请先同意商家服务协议和隐私政策');
                document.getElementById('agreeCheckbox').parentElement.classList.add('animate-pulse');
                setTimeout(() => {
                    document.getElementById('agreeCheckbox').parentElement.classList.remove('animate-pulse');
                }, 2000);
                return;
            }
            showToast('正在跳转支付宝授权...');
            setTimeout(() => {
                localStorage.setItem('userToken', 'merchant-alipay-' + Date.now());
                localStorage.setItem('userType', 'merchant');
                localStorage.setItem('loginMethod', 'alipay');
                showToast('支付宝授权成功！');
                setTimeout(() => {
                    window.location.href = 'home-b2c.html';
                }, 1000);
            }, 2000);
        }

        // Show merchant agreement
        function showMerchantAgreement() {
            alert('商家服务协议\n\n1. 商家入驻条件\n2. 平台服务内容\n3. 商家权利义务\n4. 佣金及费用说明\n5. 违规处理规则\n6. 争议解决方式\n\n详细条款请登录后查看...');
        }

        // Show privacy policy
        function showPrivacyPolicy() {
            alert('隐私政策\n\n本平台承诺保护您的隐私信息...\n\n• 信息收集范围\n• 信息使用目的\n• 信息保护措施\n• 信息共享说明');
        }

        // Contact merchant support
        function contactSupport() {
            alert('商家客服\n\n工作时间：9:00-21:00\n商家专线：400-888-1000\n在线客服：即将为您转接商家支持团队...');
        }

        // View merchant help
        function viewHelp() {
            alert('商家入驻指南\n\n• 如何申请入驻\n• 入驻所需材料\n• 审核流程说明\n• 商家权益介绍\n• 佣金费用说明\n\n更多详情请登录后查看...');
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            // Set device phone number
            const phoneNumber = getDevicePhoneNumber();
            document.getElementById('devicePhoneNumber').textContent = phoneNumber;
        });
    </script>
</body>
</html>